<template>
  <div style="margin-bottom: 30px">
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="全部" name="0"></el-tab-pane>
    <el-tab-pane label="华语" name="7"></el-tab-pane>
    <el-tab-pane label="欧美" name="96"></el-tab-pane>
    <el-tab-pane label="日本" name="8"></el-tab-pane>
    <el-tab-pane label="韩国" name="16"></el-tab-pane>
  </el-tabs>
  <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        type="index"
        width="80">
      </el-table-column>
      <el-table-column
        width="120">
        <template slot-scope="scope">
          <i class="el-icon-video-play" @click="goTo(scope.row.id)"></i>
          <span><img :src="scope.row.album.blurPicUrl" alt=""></span>
        </template>
      </el-table-column>
      <el-table-column
        label="音乐标题"
        width="260">
        <template slot-scope="scope">
          <p>{{scope.row.name}}</p>
          <span style="font-size: 12px;color: gray;">{{scope.row.album.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="歌手"
        width="180">
        <template slot-scope="scope">
          <span>{{scope.row.artists[0].name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="专辑"
        width="260">
        <template slot-scope="scope">
          <span>{{scope.row.album.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="duration"
        label="时长"
        width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'NewPage',
  data(){
    return{
      list: [],
      activeName: '0',
    }
  },
  created(){
    this.$axios({
      url: '/top/song',
      method: 'get',
      params: { type: this.activeName }
    }).then(res=>{
      console.log(res)
      this.list = res.data.data
      // 处理时长格式
      for(let i=0;i<this.list.length;i++){
        // 获取总时长(毫秒)
        let duration = this.list[i].duration
        let min = parseInt(duration/1000/60)
        min = (min<10?'0'+min:min)
        let sec = parseInt(duration/1000%60)
        sec = (sec<10?'0'+sec:sec)
        this.list[i].duration = min+':'+sec
      }
    })
  },
  methods: {
    // 点击tag事件
    handleClick(){
      this.$axios({
        url: '/top/song',
        method: 'get',
        params: { type: this.activeName }
      }).then(res=>{
        console.log(res)
        this.list = res.data.data
        // 处理时长格式
        for(let i=0;i<this.list.length;i++){
          // 获取总时长(毫秒)
          let duration = this.list[i].duration
          let min = parseInt(duration/1000/60)
          min = (min<10?'0'+min:min)
          let sec = parseInt(duration/1000%60)
          sec = (sec<10?'0'+sec:sec)
          this.list[i].duration = min+':'+sec
        }
      })
    },
    goTo(id){
      this.$axios({
        url: '/song/url',
        method: 'get',
        params: { id }
      }).then(res=>{
        console.log(res.data.data[0].url)
        this.$bus.$emit('music',res.data.data[0].url)
      })
      // 通过自定义数据传入数据
    }
  }
}
</script>

<style lang="less" scoped>
.el-table-column{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
img{
  display: block;
  width: 50%;
  height: 30%;
}
.el-table__cell{
  position: relative;
}
.el-icon-video-play{
position: absolute;
top: 18px;
left: 18px;
opacity: 0;
font-size: 25px;
border-radius: 50%;
}
.el-icon-video-play:hover{
opacity: 1;
position: absolute;
top: 25px;
left: 25px;
color: red;
background-color: #ccc;
cursor: pointer;
}
</style>